<template>
  <div class="list">
    <hand-nav :erjiShow="erjiShow" :shopingShow="shopingShow" />
    <!-- 下拉选择 -->
    <StNav />
    <!-- 列表 -->
    <!--  :productData="shopData" -->
    <Product :productData="shopData" :isSt="isSt"></Product>
    <div v-if="loading" class="loading"><span>玩命加载中...</span></div>
  </div>
</template>

<script>
import Product from "../../components/Product";
import api from "../../api";
import StNav from "./StNav";
export default {
  name: "SiteTesting",
  components: {
    StNav,
    Product,
  },
  data() {
    return {
      shopData: [],
      //控制头部购物车 耳机是否显示
      erjiShow: false,
      shopingShow: false,
      loading: false,
      flag: true,
      isSt:'isSt'
    };
  },
  created() {
    window.addEventListener("scroll", this.onScroll);
  },
  beforeDestroy() {
    window.removeEventListener("scroll",this.onScroll);
  },
  mounted() {
    api.getShopData().then((res) => {
      // console.log(res);
      this.shopData = res.data.list;

    });
  },
  methods: {
    onScroll() {
      let innerHeight = document.querySelector(".list").clientHeight; //页面高度
      let outerHeight = document.documentElement.clientHeight; //窗口高度
      let scrollTop = document.documentElement.scrollTop; //滚动高度
      // console.log(innerHeight);
      if (scrollTop + outerHeight + 50 >= innerHeight && this.flag) {
        this.flag = false;
        (this.loading = true),
          api.getShopData().then((res) => {
            // console.log(res);
            if (res.status === 200) {
              this.shopData = [...this.shopData, ...res.data.list];
              this.flag = true;
              this.loading = false;
            }
          });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.list {
  padding-bottom: 62px;
  // height: 2000px;
}
.loading {
  width: 100%;
  height: 30px;
  font-size: 16px;
  background-color: plum;
  text-align: center;
  line-height: 30px;
}
</style>